/*
    Theme Name: Canvas
    Theme URI: https://github.com/iaindillingham/canvas
    Description: Canvas provides an unassuming backdrop for your content.
    Author: Iain Dillingham
    Author URI: http://dillingham.me.uk/
    Version: 0.1
    Tags:
    Licence:
    Licence URI:

    Fonts are sized using percentages rather than ems or pxs. See
    [YUI CSS Fonts](http://developer.yahoo.com/yui/3/cssfonts/) for more information.

    Open Sans is by Ascender Fonts and is available on
    [Font Squirrel](http://www.fontsquirrel.com/fonts/open-sans).

    Raleway is by The League of Moveable Type and is available on
    [Font Squirrel](http://www.fontsquirrel.com/fonts/Raleway).

    Colours and greys are from [ColorBrewer](http://colorbrewer.org/) by
    Cynthia A. Brewer, Geography, Pennsylvania State University.

    Colours:
    #3182bd     Blue.
    #9ecae1     Light blue.
    #e6550d     Orange.

    Greys:
    #F7F7F7     Header and footer background.
    #CCCCCC     Header and footer border.
    #969696     Dimmed text (e.g. post-meta).
    #525252     All text.
*/
@import url("./lib/yui/cssfonts-min.css");
@import url("./lib/yui/cssgrids-min.css");
@import url("./lib/yui/cssreset-min.css");

/*
    Font faces generated by Font Squirrel (http://www.fontsquirrel.com)
*/
/******************************************************************************/
@font-face {
    font-family: 'RalewayThin';
    src: url('./fonts/RalewayThin/raleway_thin-webfont.eot');
    src: url('./fonts/RalewayThin/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/RalewayThin/raleway_thin-webfont.woff') format('woff'),
        url('./fonts/RalewayThin/raleway_thin-webfont.ttf') format('truetype'),
        url('./fonts/RalewayThin/raleway_thin-webfont.svg#RalewayThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansLight';
    src: url('./fonts/OpenSans/OpenSans-Light-webfont.eot');
    src: url('./fonts/OpenSans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/OpenSans/OpenSans-Light-webfont.woff') format('woff'),
        url('./fonts/OpenSans/OpenSans-Light-webfont.ttf') format('truetype'),
        url('./fonts/OpenSans/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansLightItalic';
    src: url('./fonts/OpenSans/OpenSans-LightItalic-webfont.eot');
    src: url('./fonts/OpenSans/OpenSans-LightItalic-webfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/OpenSans/OpenSans-LightItalic-webfont.woff') format('woff'),
        url('./fonts/OpenSans/OpenSans-LightItalic-webfont.ttf') format('truetype'),
        url('./fonts/OpenSans/OpenSans-LightItalic-webfont.svg#OpenSansLightItalic') format('svg');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'OpenSansBold';
    src: url('./fonts/OpenSans/OpenSans-Bold-webfont.eot');
    src: url('./fonts/OpenSans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('./fonts/OpenSans/OpenSans-Bold-webfont.woff') format('woff'),
        url('./fonts/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'),
        url('./fonts/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg');
    font-weight: bold;
    font-style: normal;
}

/*
    Structural
*/
/******************************************************************************/
#hd, #ft {
    background-color: #F7F7F7;
}

#ft {
    border-top: 1px solid #CCCCCC;
    font-size: 85%; /* 11px */
    height: 4em;
    width: 100%;
}

#hd a, #ft a {
    color: #969696;
}

#hd a:hover, #ft a:hover {
    color: #525252;
}

#bd {
    margin-right: auto;
    margin-left: auto;
    width: 960px;
}

#title {
    font-family: RalewayThin;
    font-size: 378%; /* 50px */
}

/*
    Header menu
*/
/******************************************************************************/
#header-menu {
    border-bottom: 1px solid #CCCCCC;
    background-color: #F7F7F7;
    float: right;
    width: 100%;
}

#hd ul {
    margin: 0;
    padding: 0;
}

#hd li {
    float: right;
    padding: 1em;
    position: relative;
    list-style: none;
}

#hd ul ul {
    border: 1px solid #CCCCCC;
    border-top: none;
    background-color: #F7F7F7;
    display: none;
    position: absolute;
    top: 3.2em;
    right: .2em;
}

#hd ul li:hover ul {
    display: block;
}

/*
    Common
*/
/******************************************************************************/
/*
    The wrapper should be the first element within a YUI CSS Grids unit element.
    It allows unit elements space to breathe.
*/
.wrapper {
    padding-right: 1em;
    padding-left: 1em;
}

/*
    Alignment and captions
*/
/******************************************************************************/
.alignright {
    clear: both;
    float: right;
    margin-left: 1em;
}

.alignleft {
    clear: both;
    float: left;
    margin-right: 1em;
}

.aligncentre { /* Empty */ }

.alignnone { /* Empty */ }

.wp-caption {
    color: #969696;
    font-size: 85%; /* 11px. */
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: center;
}

.wp-caption:hover {
    color: #525252;
}

.wp-caption-text {
    margin-top: .25em;
    margin-bottom: 0;
}

/*
    Posts and comments
*/
/******************************************************************************/
.post {
    clear: both;
    margin-top: 1em;
    margin-bottom: 1em;
    text-align: justify;
}

.sticky {
    padding-right: 1em;
    border-right: 1px solid #9ecae1;
    border-bottom: 1px solid #9ecae1;
}

.post-meta, .post-nav, .comment-meta {
    clear: both;
    color: #969696;
    font-size: 85%; /* 11px. */
}

.post-nav {
    height: 1.2em;
}

.post-nav-prev {
    float: left;
}

.post-nav-next {
    float: right;
}

.post-meta a, .post-nav a, .comment-meta a {
    color: #9ecae1;
}

.post-meta:hover, .post-nav:hover, .comment-meta:hover {
    color: #525252;
}

.post-meta:hover a, .post-nav:hover a, .comment-meta:hover a {
    color: #3182bd;
}

.post-meta:hover a:hover, .post-nav:hover a:hover, .comment-meta:hover a:hover {
    color: #e6550d;
}

/*
    Comments
*/
/******************************************************************************/
#comments {
    clear: both;
    margin-right: 2em;
}

#comments ol, #comments ul {
    margin-right: 0;
    margin-left: 2em;
}

#comments li {
    border-bottom: 1px solid #CCCCCC;
    border-left: 1px solid #CCCCCC;
    margin-top: 1em;
    padding-top: 1em;
    padding-left: 1em;
    list-style: none;
}

#comments li.bypostauthor {
    border-color: #9ecae1;
}

/*
    Comments form
*/
/******************************************************************************/
#respond {
    clear: both;
}

#respond input[type=text], #respond textarea {
    border: 1px solid #CCCCCC;
    color: #525252;
    display: block;
    margin-bottom: .5em;
    width: 100%;
}

#respond input[type=text] {
    height: 2em;
    padding: 0 .25em;
}

#respond textarea {
    height: 8em;
    padding: .25em;
}

#respond input[type=submit] {
    margin-bottom: .5em;
    padding: .5em;
}

/*
    HTML elements
*/
/******************************************************************************/
body {
    color: #525252;
    font-family: OpenSansLight;
}

h1 {
    font-size: 138.5%; /* 18px */
}

h2 {
    font-size: 123.1%; /* 16px */
}

h3 {
    font-size: 108%; /* 14px */
}

h1, h2, h3 {
    margin: 1em 0;
}

strong, b {
    font-family: OpenSansBold;
    font-weight: bold;
}

abbr, acronym {
    border-bottom: 1px dotted #525252;
    cursor: help;
}

em, i {
    font-family: OpenSansLightItalic;
    font-style: italic;
}

blockquote, ul, ol, dl {
    margin: 1em;
}

ol, ul, dl {
    margin-left: 2em;
}

ol li {
    list-style: decimal outside;
}

ul li {
    list-style: disc outside;
}

dl dd {
    margin-left: 1em;
}

th, td {
    border: 1px solid #525252;
    padding: .5em;
}

th {
    font-family: OpenSansBold;
    font-weight: bold;
    text-align: center;
}

caption {
    margin-bottom: .5em;
    text-align: center;
}

p, fieldset, table, pre {
    margin-bottom: 1em;
}

a {
    color: #3182bd;
    text-decoration: none;
}

a:hover {
    color: #e6550d;
}

input[type=text], input[type=password], textarea {
    width:12.25em;
    *width:11.9em;
}
